<template>
  <div class="w-full relative">
    <div
      class="w-full px-[15px] py-[20px]"
      style="background: linear-gradient(91deg, #fcecdc 0%, #fbf4e2 49%, #fcecdc 100%)"
    >
      <div class="flex items-center">
        <div class="w-[65px] h-[65px] rounded-[33px] bg-red-500">
          <van-image width="65px" height="65px" :src="Info.avatar" round />
        </div>
        <div class="ml-[16px] text-[18px] h-[65px] flex flex-col justify-between">
          <div>
            {{ Info.mobile }}
          </div>
          <div class="text-[12px]">{{ Info.agency }}</div>
        </div>
      </div>
    </div>
    <div class="px-[30px] py-[15px]">
      <div
        class="pb-[17px] border-b border-[#ECECEC] flex items-center justify-between mb-[15px]"
        v-for="(item, index) in list"
        @click="detail(index)"
      >
        <div class="flex items-center">
          <img :src="item.image" class="w-[24px] h-[24px]" />
          <div class="ml-[10px] text-[14px]">{{ item.title }}</div>
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div>
  </div>
  <div class="w-full flex justify-center">
    <div
      @click="outlogin"
      class="w-[179px] h-[50px] flex items-center justify-center border border-[#EF6800] rounded-[47px] text-[#EF6800]"
    >
      退出登录
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted } from "vue";
import getAssetsFile from "@/utils/getImageurl";
import { useRouter } from "vue-router";
import { indexUser, outLogin } from "@/utils/api";
import { showToast } from "vant";
const router = useRouter();
const list = reactive([
  {
    image: getAssetsFile("mine/1.png"),
    title: "待支付订单",
  },
  {
    image: getAssetsFile("mine/2.png"),
    title: "我的保单",
  },
  {
    image: getAssetsFile("mine/2.png"),
    title: "已作废",
  },
  {
    image: getAssetsFile("mine/3.png"),
    title: "我的业绩",
  },
  {
    image: getAssetsFile("mine/4.png"),
    title: "修改密码",
  },
]);
const Info = reactive({
  mobile: "",
  avatar: "",
  agency: "",
});
const detail = (index: number) => {
  //index 0是待支付订单  1我的保单 2我的业绩 3修改密码
  switch (index) {
    case 0:
      router.push("/h5/mine/payOrder?type=1");
      break;
    case 1:
      router.push("/h5/mine/payOrder?type=2");
      break;
    case 2:
      router.push("/h5/mine/payOrder?type=4");
      break;
    case 3:
      router.push("/h5/mine/achievement");
      break;
    case 4:
      router.push("/h5/mine/editPsd");
      break;
  }
};
const getInfo = async () => {
  const res = await indexUser("");
  // console.log(res.msg);

  Info.mobile = res.msg.mobile;
  Info.avatar = res.msg.avatar;
  Info.agency = res.msg.agency;
};
onMounted(() => {
  getInfo();
});

//退出登录
const outlogin = async () => {
  const res = await outLogin("");
  res.code == 1 ? router.push("/h5/login") : "";
  showToast(res.msg);
};
</script>
